<template>
  <el-card class="box-card">
    <el-button type="danger" icon="el-icon-circle-plus-outline" @click="openCreate">新增</el-button>
    <el-table v-if="tableData" v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" />
      <el-table-column prop="taskCode" label="工单编号" />
      <el-table-column prop="innerCode" label="设备编号" />
      <el-table-column prop="taskType.typeName" label="工单类型" />
      <el-table-column prop="method" label="工单方式" />
      <el-table-column prop="taskStatusTypeEntity.statusName" label="工单状态" />
      <el-table-column prop="userName" label="运维人员" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="text" size="small" @click="showDetail(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      prev-text="上一页"
      next-text="下一页"
      :current-page.sync="params.pageIndex"
      layout="total,slot,prev,next"
      :total="total"
      @current-change="change"
    >
      <template>
        <span>第{{ params.pageIndex }}/{{ totalPage }}页</span>
      </template>
    </el-pagination>
  </el-card>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex'
export default {
  name: 'ShowTable',
  props: {
    params: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false
    }
  },
  computed: {
    ...mapState('maintenance', ['tableData', 'total', 'totalPage'])
  },
  async created() {
    try {
      this.loading = true
      await this.getTasks(this.params)
    } finally {
      this.loading = false
    }
  },
  methods: {
    ...mapActions('maintenance', ['getTasks']),
    ...mapMutations('maintenance', ['openDetail', 'setType', 'setRowDate', 'openForm']),
    async change(val) {
      try {
        this.loading = true
        // console.log(val)
        const params = this.params
        params.pageIndex = val
        // 触发参数更新
        this.$emit('update:params', params)
        console.log(this.params)
        // 触发仓库更新
        await this.getTasks(params)
      } finally {
        this.loading = false
      }
    },
    openCreate() {
      this.openForm()
    },
    showDetail(row) {
      this.openDetail()
      // console.log(row)
      this.setType(row.taskStatusTypeEntity.statusId)
      this.setRowDate(row)
    }
  }
}
</script>

<style>

</style>
